<template>
  <div class="find-page">
    <div class="search">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <!-- 搜索 -->
      <div class="van-search">
        <router-link class="btn" to="/cityList"> {{ city }} </router-link>
        <input class="ipt" type="text" placeholder="请输入校区或地址" />
        <van-icon name="location-o" size="25" @click="$router.push('/mapFind')"/>
      </div>
    </div>
    <!-- icon -->
    <div class="div">
      <van-icon
        name="https://img1.baidu.com/it/u=2744299766,2384149717&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
    </div>
    <!-- 筛选 -->
    <div class="filter">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </div>
    <!-- 列表 -->
    <div class="list" v-for="item in list" :key="item.houseCode">
      <div class="left">
        <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
      </div>
      <div class="right">
        <div class="title">
          <h3>{{ item.title }}</h3>
        </div>
        <div class="desc">
          <p>{{ item.desc }}</p>
        </div>
        <div class="tag">
          <span>{{ item.tags[0] }}</span>
        </div>
        <div class="price">
          <strong>{{ item.price }}</strong
          >元/月
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCityName } from '@/utils/storage'
import { collect } from '@/api/home'
export default {
  name: 'find-page',
  data () {
    return {
      show: false,
      list: [],
      city: getCityName() ? getCityName() : '上海',
      value1: 0,
      value2: 'a',
      value3: 'x',
      value4: 'd',
      option1: [
        { text: '区域', value: 0 },
        { text: '不限', value: 1 },
        { text: '等等', value: 2 }
      ],
      option2: [
        { text: '方式', value: 'a' },
        { text: '合租', value: 'b' },
        { text: '整租', value: 'c' }
      ],
      option3: [
        { text: '租金', value: 'x' },
        { text: '不限', value: 'y' },
        { text: '1000-2000', value: 'z' }
      ],
      option4: [
        { text: '筛选', value: 'd' },
        { text: '不限', value: 'e' },
        { text: '等等', value: 'f' }
      ]
    }
  },
  async created () {
    const res = await collect()
    this.list = res.body
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.find-page {
  position: relative;
  .filter {
    display: flex;
    .van-dropdown-menu{
      width: 100%;
    }
  }
  .div {
    position: absolute;
    transform: translate(85px, -31px);
    z-index: 999;
  }
  .search {
    position: relative;
    .van-search {
      position: absolute;
      transform: translate(45px, -40px);
      z-index: 999;
      width: 275px;
      height: 34px;
      border-radius: 3px;
      background-color: #fff;

      .van-icon {
        position: absolute;
        transform: translateX(275px);
      }
      .btn {
        height: 20px;
        font-size: 14px;
        width: 50px;
        line-height: 22px;
        padding-left: 0px;
        border-radius: 3px;
        border-right: 1px solid #9999 !important;
        color: #333;
        background-color: #fff;
        border: 1px solid #fff;
      }
      .ipt {
        margin-left: 20px;
        height: 30px;
        border: 1px solid #f6f6f6;
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .list {
    display: flex;
    height: 120px;
    padding-top: 18px;
    box-sizing: border-box;
    .left {
      img {
        width: 106px;
        height: 80px;
      }
    }
    .right {
      margin-left: 15px;
      .title {
        transform: translateY(-15px);
        font-size: 13px;
      }
      .desc {
        font-size: 12px;
        color: #9999;
        transform: translateY(-27px);
      }
      .tag {
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
        color: #39becd;
        background: #e1f5f8;
        transform: translateY(-35px);
      }
      .price {
        color: red;
        transform: translateY(-35px);
      }
    }
  }
}
</style>
